<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@  taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>商品详情主体</title>
<script type="text/javascript" src="static/js/jquery-3.1.0.js"></script>
<link rel="stylesheet" href="static/css/xq_body.css" />
<link rel="stylesheet" type="text/css" href="static/css/magnifier.css">
</head>
<body>
<body>
	<jsp:include page="/WEB-INF/jsps/xq/xq_top.jsp">
		<jsp:param value="" name=""/>
	</jsp:include>
	<div class="gg">
	<div class="t-jl">
		<div class="jl"><a>手机</a>	</div>	<div class="r-j">></div>
		<div class="jl"><a>手机通讯</a></div>	<div class="r-j">></div>
		<div class="jl"><a>全部手机</a></div>	<div class="r-j">></div>
		<div class="jl"><a>${brand.pingpai_name}（${brand.pingpai_englishname}）</a>	</div>		<div class="r-j">></div>
		<div class="jl"><a>${sp.shoop_Name}</a></div>
	</div>
	</div>
	<div class="w">
		<div class="n_box">
			<div class="magnifier" id="magnifier1">
				<div class="magnifier-container">
					<div class="images-cover"></div>
					<!--当前图片显示容器-->
					<div class="move-view"></div>
					<!--跟随鼠标移动的盒子-->
				</div>

				<div class="magnifier-assembly">
					<div class="magnifier-btn">
						<span class="magnifier-btn-left"></span> <span
							class="magnifier-btn-right"></span>
					</div>
					<!--按钮组-->
					<div class="magnifier-line">
						<ul class="clearfix animation03">
							<!-- 左侧的商品展示图片 -->
							<c:forEach items="${requestScope.urllist }" var="urllist">
								<li>
									<div class="small-img">
										<img src="${urllist.picture_path}" />
									</div>
								</li>
							</c:forEach>
						</ul>
					</div>
					<div class="zzc">1</div>
					<!--缩略图-->
				</div>
				<div class="magnifier-view"></div>
				<!--经过放大的图片显示容器-->
			</div>
			<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
			<script type="text/javascript" src="static/js/magnifier.js"></script>
			<script type="text/javascript">
				$(function() {

					var magnifierConfig = {
						magnifier : "#magnifier1", //最外层的大容器
						width : 450, //承载容器宽
						height : 450, //承载容器高
						moveWidth : null, //如果设置了移动盒子的宽度，则不计算缩放比例
						zoom : 1.64
					//缩放比例
					};

					var _magnifier = magnifier(magnifierConfig);

					/*magnifier的内置函数调用*/
					/*
						//设置magnifier函数的index属性
						_magnifier.setIndex(1);

						//重新载入主图,根据magnifier函数的index属性
						_magnifier.eqImg();
					 */
				});
			</script>
			<div class="xx_box">

				<div class="title">${sp.shoop_Product}</div>
				<div>
					<div class="h_box">
						<div class="ms">
							<div class="ms_img"></div>
							<div class="ms_txt">京东秒杀</div>
						</div>
						<div class="jiage">
							<span class="sxz">京东价</span>
							<div class="money">
								<span>￥</span><span class="mon">${sp.shoop_price}</span>
							</div>
						</div>
						<%-- 商品编号 --%>
						<input type="hidden" id="sp_id" value="${sp.shoop_Id}">
						<div class="cx">
							<div class="sxz">
								库存：<i class="kucun">${sp.shoop_Inventory}</i>
							</div>
						</div>
					</div>

					<div class="weight">
						<div class="sxz">重&nbsp;量</div>
						<div class="KG">${w.sxz_zhi}</div>
					</div>
					<span class="hr"></span>

					<!-- 选择颜色，选择容量 -->

					<c:forEach items="${list2}" var="xssx">
						<ul class="list2">
							<li>${xssx.xssx_name}</li>
						</ul>
						<ul class="list-3">
							<c:forEach items="${map[xssx.xssx_name]}" var="xssxzhi">
								<c:if
									test="${color==xssxzhi.xssxz_zhi || rom==xssxzhi.xssxz_zhi}"
									var="isColor">
									<li class="sp_bor s${xssx.xssx_id}"><a href="javascript:;">${xssxzhi.xssxz_zhi}</a></li>
								</c:if>
								<c:if test="${not isColor}">
									<li class="s${xssx.xssx_id}"><a href="javascript:;">${xssxzhi.xssxz_zhi}</a></li>
								</c:if>
							</c:forEach>
						</ul>
					</c:forEach>
					<input type="hidden" name="color" value="${color}" /> 
					<input type="hidden" name="rom" value="${rom}" />
					<script type="text/javascript">
						$(function() {
							$('.list-3 .s1').click(
									function() {
										var c = $(this).find('a').text();
										var d=	$('input[name=color]').val(c);
										//$(this).addClass('sp_bor').siblings().removeClass('sp_bor');
										location.href = "xq_body?color=" + c
												+ "&rom="
												+ $('input[name=rom]').val();
									});
							$('.list-3 .s2').click(
									function() {
										var c = $(this).find('a').text();
										var d =$('input[name=rom]').val(c);
										alert(c);
										//$(this).addClass('sp_bor').siblings().removeClass('sp_bor');
										location.href = "xq_body?color="
												+ $('input[name=color]').val()
												+ "&rom=" + c;

							});
							
							
						});
					</script>
					<div class="color">
						<div class="xsxz">购买方式</div>
						<a href="#">官方标配</a>
					</div>
					<div class="b_box">
						<div class="c_box">
							<div class="a">1</div>
							<div class="jia">+</div>
							<div class="jian">-</div>
						</div>
						<div class="car">加入购物车</div>
						<script type="text/javascript">
							$(function() {
								$('.jia').click(function() {
									//获取数量
									var num = $('.a').text();
									var stock = $('.kucun').text();
									if (num != stock) {
										$('.a').text(parseInt(num) + 1);
									} else {
										alert("库存上限");
									}
								});
								$('.jian').click(function() {
									//获取数量
									var num = $('.a').text();
									if (num != "1") {
										$('.a').text(parseInt(num) - 1);
									}
								});
							});
						</script>
					</div>
				</div>
			</div>

			<div class="by_btn">
				<ul class="xxxx">
					<li class="ax current" id="lix"><a href="javascript:;">商品介绍</a></li>
					<li class="ax"><a>规格与包装</a></li>
					<li class="ax"><a>售后保障</a></li>
					<li class="ax" id="pj"><a href="javascript:;">商品评价</a></li>
					<li class="ax"><a>手机社区</a></li>
				</ul>
				<span class="hrx"></span>

				<div class="ajax">
					<jsp:include page="/WEB-INF/jsps/pj/xq_spsx.jsp">
						<jsp:param value="" name="" />
					</jsp:include>
				</div>
			</div>
		</div>
		<script type="text/javascript">
					$(function() {
						$("#pj").click(function() {
							var spid = $('#sp_id').val();
							$('.ajax').load("xq_spj?spid=" + spid);
							$(this).addClass('current');
							$('#lix').removeClass('current');
						});
						
						$("#lix").click(function() {
							var spid = $('#sp_id').val();
							$('.ajax').load("xq_sp?spid=" + spid);
							$(this).addClass('current');
							$('#pj').removeClass('current');
						});
						
						window.onload=function(){
							var spid = $('#sp_id').val();
							$('.ajax').load("xq_sp?spid=" + spid);
						}
					});
					
						$(".car").click(function(){
							var spid = $('#sp_id').val();
							var yan=$('input[name=color]').val();
							var rl=$('input[name=rom]').val();
							var num=$('.a').text();
							location.href="addgoodscart?spid="+spid+"&yan="+yan+"&rl="+rl+"&num="+num;
						});
					
				</script>
			
		</div>
</body>

</html>